import React, { Component } from 'react'
import ReactDom from "react-dom"
import '../../../styles/Home/Dizhi.scss'
// import PickerViewExample from '../ant/PickerViewExample'
import { PickerView } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
const season = [
    {
        label: '浙江',
        value: '浙江',
    },
    {
        label: '上海',
        value: '上海',
    },
    {
        label: '北京',
        value: '北京',
    },
    {
        label: '深圳',
        value: '深圳',
    },
    {
        label: '汕头',
        value: '汕头',
    },
    {
        label: '广州',
        value: '广州',
    },
];

class Dizhi extends Component {
    constructor(porps) {
        super(porps);
        this.el = document.createElement("div")
    }
    componentDidMount() {
        document.body.appendChild(this.el)
    }
    UNSAFE_componentWillUnmount() {
        document.body.removeChild(this.el)
    }

    state = {
        isFromProps: true,
        show: false,
        value: null,
    };

    static getDerivedStateFromProps(nextProps, nextState) {
        if (nextState.isFromProps) {
            return {
                show: nextProps.show,
            };
        } else {
            // 默认是从 props 中获取 show 状态值
            return {
                isFromProps: true,
            };
        }
    }

    handleClose = (params) => {
        // console.log(this);
        this.setState({
            isFromProps: false,
            show: false,
        });
    };

    render() {
        return (
            <div>
                {
                    this.state.show && ReactDom.createPortal(<div className="modal">
                        <div className="mask"></div>
                        <div className="modalHeader">
                            <div className="caozuo">
                                <div className="close" onClick={this.handleClose}>取消</div>
                                <div className="right">完成</div>
                            </div>
                            <div>
                                <PickerView
                                    data={season}
                                    cascade={false}
                                />
                            </div>
                        </div>
                    </div>, this.el)
                }
            </div>
        )
    }
}

export default Dizhi